﻿@{
    ViewBag.Title = "实时水情";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
<link href="~/Content/Scripts/bootstrapPlugin/Checkboxes/css/build.css" rel="stylesheet" />

<script>
    $(function () {
        loadPage();

        $("#checkboxShow").click(function () {
            if ($("#checkboxShow").prop("checked")) {
                //只显示超警站点
                refreshPage(1);
            } else {
                //全部显示
                refreshPage();
            }
        });

        function refreshPage(flag) {
            var url = 'Water/GetWaterStationInfo';
            if (flag) {
                url = 'Water/GetWaterStationInfo?onlySuper=1';
            }
                var opt = {
                    url: url
                };
                $('#table').bootstrapTable('refresh', opt);
        }

        function loadPage() {
            var url = 'Water/GetWaterStationInfo';
            $('#table').bootstrapTable({
                //search: true,
                //toolbar: '.toolbar',
                fixedColumns: true,
                fixedNumber: 1,
                columns: [{
                    field: 'STNM',
                    title: '站名',
                    formatter: function (value, row, index) {
                        return '<a href="/Water/Detail?stcd='+row.STCD+'">'+value+'</a>';
                    }
                }, {
                    field: 'STCD',
                    title: '站码'
                }, {
                    field: 'TIME',
                    title: '时间'
                }, {
                    field: 'SUPER',
                    title: '超警(m)'
                }, {
                    field: 'WARNING',
                    title: '警戒值(m)'
                }],
                url: url
            });
        }
    });
</script>

<div class="checkbox checkbox-danger" align="left">
    <input id="checkboxShow" class="styled" type="checkbox">
    <label for="checkboxShow">
        仅显示超警
    </label>
</div>
<div class="tab-content">
    <div class="tab-pane fade in active" id="OverWarning">
        <table id="table" data-height="400" @*data-show-columns="true"*@ style="min-width: 600px"></table>
    </div>
</div>


